<template>
  <!-- 学习资料上传管理 -->

  <div class="class-mg">
    <!-- 创建班级头部 -->
    <div class="up-material">
      <el-button @click="showModal = true" style="margin-left: 10px;">上传资料</el-button>
    </div>

    <!-- 班级信息表格 -->
    <div class="mg-class">
      <span>我上传的文件:</span>
      <el-table :data="materialData" style="width: 100%;border-radius: 10px;">
        <el-table-column prop="className" label="班级名" width="120"></el-table-column>
        <el-table-column prop="materialTitle" label="文件名" ></el-table-column>
        <el-table-column prop="size" label="文件大小" width="180"></el-table-column>
        <el-table-column label="删除" width="180" #default="data ">
          <el-popconfirm title="确认删除上传到该班级的文件资料?" @confirm="onDeleteClass(data.row.materialId)">
                        <template #reference>
                          <img  src="/src/assets/svg/delete1.svg" class="deleye-img">
                        </template>
                    </el-popconfirm>
        </el-table-column>
        <el-table-column label="文件下载"  #default="data">
                          <img style="margin-left: 20px;" src="/src/assets/svg/download.svg" class="deleye-img" @click="ondownload(data.row.materialPath)">

        </el-table-column>
      </el-table>
    </div>
  </div>

  <!-- 发送通知弹窗 -->
  <n-modal v-model:show="showModal">
    <n-card style="width: 600px" title="上传文件资料" role="dialog" aria-modal="true">
      <!-- 分割线 -->
      <el-divider content-position="right">
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <!-- 关闭框 -->
      <template #header-extra>
        <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
      </template>
      <!-- 主要内容 -->
      <div class="alter">
        请选择要上传资料到哪些班级:<n-select v-model:value="selectClass" style="width: 100%" multiple :options="selectOptions" />
        请选择要上传的资料文件:
        <!-- {{ uploadRef }} -->
        <div class="files">
          <!-- 文件上传 -->
          <n-upload ref="uploadRef" v-model:file-list="fileList" directory-dnd multiple :max="5">
            <n-upload-dragger>
              <div style="margin-bottom: 12px">
                <img src="/src/assets/svg/fileUpload.svg">
              </div>
              <n-text style="font-size: 16px">
                点击或者拖动文件到该区域来上传
              </n-text>
              <n-p depth="3" style="margin: 8px 0 0 0">
                文件一次性上传限制:5<br>
                请不要上传敏感数据
              </n-p>
            </n-upload-dragger>
          </n-upload>
        </div>
      </div>
      <!-- 提交按钮 -->
      <template #footer>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="onUpfiles()">发送</el-button>
        </div>
      </template>
    </n-card>
  </n-modal>

</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import A from '../MD/A.vue';
import { downloadMaterial, upMaterial } from '@/api/filesHttp';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';
import teacherHttp from '@/api/teacherHttp';
const userStore = useUserStore()
//学习资料数据库 主键id  class_id所属于班级 资料名称 资料存储地址 上传资料的老师 上传时间
// 显示弹窗
const showModal = ref(false)
//班级信息
const classInfo = ref([])
onMounted(()=>{
  //初始化数据
  getClassList()
  getMaterialList()
})

//文件上传----------------------------------------
//文件列表 文件就在里面
const fileList = ref([])
const selectClass = ref([])



//点击上传文件
function onUpfiles() {
  if (fileList.value.length == 0) {
    openInfo("前先选择要上传的文件")
  } else if (selectClass.value.length == 0) {
    openInfo("请先选择要上传到哪些班级")
  } else {
    const filesForm = new FormData();
    // 添加每一个元素
    fileList.value.forEach((item) => {
      filesForm.append("files", item.file);
    })
    filesForm.append("selectClass", selectClass.value);
    filesForm.append("teacherId", userStore.userInfo.userId);
    //发送亲求上传文件
    showModal.value=false
    upMaterial(filesForm).then((res) => {
      openInfo(res.msg)
      
      //文件上传成功更新表单
      getMaterialList()
    })
  }
}

//文件资料表单-------------- 上传到那个班级 文件名，文件下载地址 老师名字 文件大小
//className materialId materialPath materialTitle nickName size
const materialData = ref([])

// 发送通知选项-这里用classStore.classInfo可能有问题-------------------------------------
const selectOptions = computed(() => {
  return classInfo.value.map(item => ({
    label: item.className,
    value: item.classId
  }));
})

//删除该资料
function onDeleteClass(materialId) {
  teacherHttp.deleteMaterial(materialId).then((res)=>{
    if(res.code==200){
      getMaterialList()
    }
   openInfo(res.msg)
   
  })
  
}

//获取文件列表数据
function getMaterialList(){
  teacherHttp.getMaterialList(userStore.userInfo.userId).then((res)=>{
    materialData.value = res.data;
    console.log(res.data);
    
  })
}

// 获取初始化数据
function getClassList(){
  teacherHttp.getClassList(userStore.userInfo.userId).then((res)=>{
    // 初始化班级表单数据
    classInfo.value= res.data
  })
}

//文件下载
async function ondownload(materialPath) {
  try {
    // 创建一个新的<a>元素，用于模拟点击下载
    const link = document.createElement('a');
    link.href = materialPath;
    // 模拟点击<a>元素，触发下载操作
    link.click();
  } catch (error) {
    console.error('下载文件失败:', error);
  }
}
</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
  background-color: rgb(182, 174, 174, 0.1);
  display: flex;
  flex-direction: column;
  height: 900px;
  border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
  margin: 10px;
  height: 50px;
  background-color: rgb(182, 174, 174, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
}


/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.deleye-img:hover {
  transform: scale(1.2);
}

.Table_box {}

/* 我创建的班级 */
.mg-class {
  border-radius: 10px;
  padding: 20px;

}
</style>